<template>
  <view class="adopt-servce-wrapper">
    <scroll-view
      class="sv-content"
      scroll-y="true"
    >
      <view class="adopt-wrap">
        <u--image
          src="/static/cloudAdopt/bg_recommend_cloud_pet.png"
          width="100%"
          mode="widthFix"
          height="130rpx"
        ></u--image>

        <view class="cloud-adopt-content">
          <view class="service-wrap">
            <view class="service">
              <u--image
                width="472rpx"
                height="40rpx"
                src="/static/cloudAdopt/bg_cloud_adopt_title.png"
              ></u--image>
              <text class="adpot-text">认养服务</text>
            </view>
          </view>
          <!-- <scroll-view
            class="sv-content"
            scroll-y="true"
          > -->
          <rich-text
            :nodes="cloudAdoptionIntro"
            class="rule-content"
          ></rich-text>
          <!-- </scroll-view> -->
          <view class="flex justify-sb service-rights">
            <view class="flex flex-y align-center">
              <view
                class="iconfont icon-meirifankui"
                style="font-size: 44rpx; color: #ff7ce3"
              ></view>
              <text class="service-text">每日反馈</text>
            </view>
            <view class="flex flex-y align-center">
              <view
                class="iconfont icon-renyangzhengshu"
                style="font-size: 44rpx; color: #ff7ce3"
              ></view>
              <text class="service-text">认养证书</text>
            </view>
            <view class="flex flex-y align-center">
              <view
                class="iconfont icon-lingyangyouxianquan"
                style="font-size: 44rpx; color: #ff7ce3"
              ></view>
              <text class="service-text">领养优先权</text>
            </view>
            <view class="flex flex-y align-center">
              <view
                class="iconfont icon-jidiruyuandianzipiao"
                style="font-size: 44rpx; color: #ff7ce3"
              ></view>
              <text class="service-text">基地入园电子票</text>
            </view>
          </view>
          <view class="signature-wrap">
            <text style="font-weight: 500; font-size: 28rpx; color: #333333">
              认养人的署名
              <text
                style="
                  font-weight: 400;
                  font-size: 24rpx;
                  color: #f05ac7;
                  margin-left: 12rpx;
                "
              >
                (宠物介绍页会展示该信息)
              </text>
            </text>
            <view style="height: 24rpx"></view>
            <u--input
              v-model="nickName"
              font-size="24rpx"
              placeholder="请输入您作为认养人想留下的专属称呼"
              maxlength="8"
              color="#333333"
              border="surround"
            ></u--input>
          </view>
        </view>
      </view>
    </scroll-view>
    <view class="button-wrapper">
      <view
        class="adopt-btn"
        @click="adopt"
      >
        我要认养
      </view>
    </view>
  </view>
</template>

<script>
import { getRuleInfo } from '@/api/common.js';
import { cloudNameCheck } from '@/api/pet-core.js';
import { playAdoptAudio } from '@/utils/tools.js';
export default {
  data() {
    return {
      cloudAdoptionIntro: '',
      nickName: '',
    };
  },
  mounted() {
    this.getRuleInfo();
  },
  methods: {
    getRuleInfo() {
      const that = this;
      getRuleInfo('GZ0016').then((res) => {
        if (res.code === 0) {
          that.cloudAdoptionIntro = res.data.content;
        }
      });
    },
    async adopt() {
      playAdoptAudio();
      const that = this;
      if (!this.nickName) {
        uni.showToast({
          title: '签署名不能为空',
          icon: 'none',
        });
        return;
      }
      try {
        await cloudNameCheck({ signName: this.nickName });
        that.$emit('sureAdopt', { nickName: that.nickName, step: '1' });
      } catch (e) {
        console.log('dsd', e);
        uni.showToast({
          title: e.data.msg,
          icon: 'none',
        });
        // throw new Error(e);
      }
    },
  },
};
</script>

<style lang="scss">
.adopt-servce-wrapper {
  .sv-content {
    max-height: 100vh * 0.6;
    .adopt-wrap {
      position: relative;
      .cloud-adopt-content {
        display: flex;
        flex-direction: column;
        background-color: #ffffff;
        .service-wrap {
          display: flex;
          position: absolute;
          top: 36rpx;
          width: 100%;
          align-items: center;
          justify-content: center;
          .service {
            position: relative;
            .adpot-text {
              position: absolute;
              top: 0;
              width: 100%;
              text-align: center;
              display: flex;
              align-items: center;
              justify-content: center;
              font-weight: 600;
              font-size: 32rpx;
              color: #fc54b5;
            }
          }
        }
        .rule-content {
          margin: 0 32rpx;
        }
        // .sv-content {
        //   max-height: 360rpx;
        //   .rule-content {
        //     margin: 0 32rpx;
        //   }
        // }
        .service-rights {
          margin: 0 50rpx;
          .service-text {
            font-weight: 500;
            font-size: 24rpx;
            color: #333333;
            margin-top: 8rpx;
          }
        }
        .signature-wrap {
          margin: 24rpx;
          background: #fafafa;
          border-radius: 16rpx;
          padding: 32rpx 24rpx;
        }
      }
    }
  }
  .button-wrapper {
    background-color: #ffffff;
    padding: 24rpx 0;
    .adopt-btn {
      height: 96rpx;
      background: #ff7ce3;
      border-radius: 48rpx;
      line-height: 96rpx;
      margin: 0 48rpx;
      text-align: center;
      font-weight: 600;
      font-size: 32rpx;
      color: #ffffff;
    }
  }
}
</style>
